<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="header-editor" v-if="module" v-cloak>
        <el-form-item label="隐藏标题">
            <el-switch v-model="module.hidden"></el-switch>
        </el-form-item>
        <div v-show="module.hidden == false">
            <el-form-item label="标题风格">
                <ul class="style-items">
                    <li @click="styleChangeHandle(item.value)" :class="{
                        'style-item': true,
                        active: module.styleName == item.value,
                    }" v-for="(item,i) in styleItems" :key="i">
                        <el-image :src="require('@/assets/images/pagemaker/header-style/' +
                            item.name +
                            '.png')
                            "></el-image>
                    </li>
                </ul>
            </el-form-item>
            <el-form-item label="主标题">
                <div style="display: flex;align-items: center;">
                    <el-input show-word-limit :maxlength="10" style="width: 200px;margin-right: 10px;"
                    v-model="module.title.text" />
                <el-color-picker v-model="module.title.color" />
                </div>

            </el-form-item>
            <el-form-item label="字号">
                <!-- <el-input max="40" min="20" style="width: 200px; margin-right: 10px" type="Number"
                    v-model="" /> -->
                    <el-input-number :min="24" :max="40" :step="1" step-strictly v-model="module.title.fontSize" />
            </el-form-item>
            <el-form-item label="图标" v-if="module.styleName == 0">
                <image-picker width="24" height="24" v-model="module.title.icon" />
            </el-form-item>

            <el-form-item label="副标题">
                <el-input show-word-limit :maxlength="10" style="width: 200px; margin-right: 10px"
                    v-model="module.subtitle.text" />
            </el-form-item>

            <el-form-item label="跳转" v-show="showLink">
                <link-editor v-model="module.link"></link-editor>
            </el-form-item>
        </div>
    </div>
</template>

<script>
import FontEditor from "./FontEditor";
import LinkEditor from "@/components/LinkEditor";

export default {
    components: { FontEditor, LinkEditor },
    data () {
        return {
            activeTab: "base",
            disabledAttrs: ["margin", "height"], // 不允许修改哪些公共样式
            loading: false,
            // 标题的样式
            styleItems: [
                { name: "style-0", value: 0 },
                { name: "style-1", value: 1 },
                { name: "style-2", value: 2 },
                { name: "style-3", value: 3 },
            ],
        };
    },

    props: {
        module: { type: Object },
    },

    watch: {
        "module.style": function (v) {
            // 切换分割时候，设置padding、margin
            switch (v) {
                case 0:
                    this.$set(this.module.padding, "left", true);
                    break;
                case 3:
                    this.$set(this.module.padding, "left", false);
                    break;
            }
        },
    },

    computed: {
        showLink: function () {
            // 只有某些样式下才可以点击副标题跳转
            var indexList = [0, 3];
            return indexList.includes(this.module.styleName);
        },
    },
    methods: {
        themeColorChange: function (rgb) {
            this.$set(this.module, "themeColor", rgb);
        },

        styleChangeHandle: function (val) {
            this.$set(this.module, "styleName", val);
        },
    },
};
</script>

<style scoped>
.style-items {
    margin: 10px 0 10px 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    user-select: none;
}

.style-items .style-item {
    width: 120px;
    box-shadow: 0 2px 17px 3px rgba(207, 221, 213, 0.35);
    border-radius: 3px;
    border: 1px solid #f1f1f1;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

.style-items .style-item:nth-child(2n) {
    margin-right: 0;
}

.style-items .style-item:hover {
    box-shadow: 0 2px 17px 3px rgba(207, 221, 213, 0.6);
}

.style-items .style-item.active {
    border: 1px solid #1989fa;
    box-shadow: none;
}
</style>